<!--
  Gz plus 通用时间选择器， 支持下拉框选择和自定义时间。
  示例： <GzDateRangePicker customDateRangeType="dateTime" v-model="dateVal" />

  @author will
  @site https://pt.jdyd.xyz
  @date 2021/12/09 17:17
-->
<template>
  <a-select v-if="!showCustomTimeFlag" v-model:value="selectValue" :placeholder="placeholder" @change="selectChangeFunc">
    <!-- 通用的时间选择项 -->
    <template v-if="!statisticalTimeIsShow">
      <a-select-option v-if="allTimeIsShow" value="">全部时间</a-select-option>
      <a-select-option v-if="isIncludeToday" value="today">今天</a-select-option>
      <a-select-option value="yesterday">昨天</a-select-option>
      <a-select-option value="near2now_7">近7天</a-select-option>
      <a-select-option value="near2now_30">近30天</a-select-option>
    </template>

    <!-- 首页交易统计折线图独有的时间选择项 -->
    <template v-if="statisticalTimeIsShow">
      <a-select-option value="near2now_7">近7天</a-select-option>
      <a-select-option value="near2now_30">近30天</a-select-option>
      <a-select-option value="near2now_90">近90天</a-select-option>
    </template>
    <a-select-option value="custom">自定义时间</a-select-option>
  </a-select>

  <div v-else>
    <a-range-picker
      ref="rangePicker"
      v-model:value="customDateValue"
      :open="dateRangePickerIsOpen"
      :input-read-only="true"
      :allow-empty="[true, true]"
      :disabled-date="disabledDate"
      :show-time="customDateRangeType === 'dateTime' ? true : false"
      @change="customDateChangeFunc"
      @openChange="(status) => dateRangePickerIsOpen = status"
    >
      <!-- 隐藏掉尾部 icon  -->
      <template #suffixIcon />

      <!-- 自定义footer -->
      <template #renderExtraFooter> <span style="cursor:pointer" @click="returnSelectModel"> <left-circle-outlined /> 返回日期下拉框</span> </template>
    </a-range-picker>
  </div>
</template>
<script setup lang="ts">
import { toRaw, ref,nextTick, defineProps, defineEmits, onMounted, watch } from 'vue'
import dayjs, { Dayjs } from 'dayjs'

// 定义父组件的传值
const props = defineProps({
  value: { type: String, default: '' },
  customDateRangeType: { type: String, default: 'dateTime' }, // date 和 dateTime
  allTimeIsShow: { type: Boolean, default: false }, // 首页饼图，不显示全部时间
  // 首页交易统计折线图独有的时间选择项
  statisticalTimeIsShow: { type: Boolean, default: false },
  isIncludeToday: { type: Boolean, default: false }, //是否能查当天
  placeholder: {type: String, default: '选择搜索时间'},
  isDisabledDate: {type: Boolean, default: true},  // 是否限制时间选择
})

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:value'])

// 首次加载组件的默认值 （用作当自定义时间切换到下拉框时， 可以正确回显默认的时间，  如果没有该字段则props被覆写。 ）
let modelValueDefault = ''

// a. 时间搜索下拉框的值
const selectValue:any = ref(null) // 修复默认值使用'',导致占位符placeholder没效果

// b. 自定义时间选择空间选择的时间
const customDateValue : any = ref(null)

// 是否显示自定义时间控件
const showCustomTimeFlag = ref(false)

// 控制是否默认展开时间选择器： 当设置了 : open = "dateRangePickerIsOpen" 生效， 但是将导致所有的失焦等事件的失效，
// 可使openChange解决: https://juejin.cn/post/6844903859987415047
const dateRangePickerIsOpen = ref(false)

// 自定义时间的$ref对象  用作聚焦使用。
const rangePicker = ref()

// 不能选择超过今天的日期
const disabledDate = (current: Dayjs) => {
  if(!props.isDisabledDate){
    return false
  }
  return current > dayjs().subtract(1, 'day')|| current < dayjs('2022-11-1 00:00:00')
}

onMounted(() => {

  // 包含默认值， 需要自动切换。
  if (props.value){
    selectValue.value = props.value
    modelValueDefault = props.value

    // 包含自定义时间值
    if(props.value.indexOf('customDateTime_') == 0){
      showCustomTimeFlag.value = true // 切换页面
       let strArr : any = props.value.split('_')
      customDateValue.value = [dayjs(strArr[1]), dayjs(strArr[2])]
    }

  }
})

// 重置按钮，不能直接重置时间选择，需要通过watch监听，进行重置
watch( () => props.value ,(newVal,oldVal)=>{
  if (!props.value) {
    selectValue.value = ''
  }else if(props.value=='today'){
    selectValue.value = 'today'
  }else if(props.value=='yesterday'){
    selectValue.value = 'yesterday'
  }
})

// 切换下拉框的事件
function selectChangeFunc(val){

  if(val === 'custom'){ // 选择了自定义时间

    customDateValue.value = null // 重置日期组件的值
    changeModelValue('') // 重置父组件的值
    showCustomTimeFlag.value = true // 切换页面

    nextTick(() => {
      dateRangePickerIsOpen.value = true   //默认展开
      rangePicker.value.focus()

    } )
  }else{

    showCustomTimeFlag.value = false // 不显示自定义
    changeModelValue(val)
  }
}

// 自定义时间控件， 切换时间的监听事件
function customDateChangeFunc(){

  let timeArray = toRaw(customDateValue.value) as any

  // 未选择日期
  if(!timeArray || timeArray.length <= 0){
    changeModelValue('')
    return false
  }

  let start = 'N'
  let end = 'N'

  if(timeArray.length >= 1 && timeArray[0]){
    start = timeArray[0].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 00:00:00')
  }

  if(timeArray.length >= 2 && timeArray[1]){
    end = timeArray[1].format(props.customDateRangeType == 'dateTime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD 23:59:59')
  }

  // 全部使用： customDateTime类型
  changeModelValue('customDateTime_' + start + '_' + end)

}

// 更新父组件的值
function changeModelValue(val){
  emit('update:value', val)
}

// 返回下拉框模式 （返回页面， 清空值）
function returnSelectModel(){

  customDateValue.value = null //日期清空

  // 如果上一次（默认）是自定义时间， 那么直接返回到全部时间页面。 
  if(modelValueDefault && modelValueDefault.indexOf('customDateTime_') == 0){
    selectValue.value = ''
  }else{
    selectValue.value = modelValueDefault // 选择第一次的默认选择项。
  }

  changeModelValue(selectValue.value) //重置 父组件的值
  showCustomTimeFlag.value = false // 切换显示页面
}
defineExpose({returnSelectModel})
</script>

<style scoped></style>
